﻿<div data-dojo-attach-point="imageBrowserContainer" class="image-browser" >
    
    <div data-dojo-attach-point="vppListNode">
    </div>    

    <div class="top-bar tabs">
        <ul data-bind="foreach: virtualPathProviders">
            <li data-bind="css: { active:  $parent.isCurrentVpp($data) }"><a data-bind="text: displayName, click: $parent.changeVirtualPathProvider"></a></li>
        </ul>
    </div>

    <div class="search" data-bind="with: currentVpp">
        <div class="search-input epi-gadgetInnerToolbar" data-bind="dijitValue: { widget: 'epi.shell.widget.SearchBox', useStandarWidget: false, eventName: 'onsearchBoxChange', getValueFunction: function(widget) { return widget.textbox.value; }, value: searchTerm }"></div>
        <span class="search-recursive" data-bind="dijitValue: { widget: 'ToggleButton', css: 'epi-trailingToggleButton epi-mediumButton', settings: { title: 'Search recursive', iconClass: 'epi-iconTree', canExecute: true }, getValueFunction: function(widget) { return widget.checked; }, value: searchRecursive }"></span>
    </div>
    
    <div class="top-bar" data-bind="with: currentVpp">
        <span data-bind="text: directoryName" class="directory"></span>

        <ul class="directory-path" data-bind="foreach: parentPaths">
            <li><a data-bind="text: name, click: function() { $parent.goToPath(path); }"></a><span class="breadcrumb-separator"></span>
            </li>
        </ul>
        
        <div class="clearfix"></div>
    </div>
    
    <div class="clearfix"></div>

    <div class="explorer"  data-bind="with: currentVpp">
        <ul data-dojo-attach-point="itemsList" class="container">
            
            <!-- ko if: newDirectoryViewModel.isInNewDirectoryMode -->
            <li data-bind="event: { mousedown: function() { touchDirectory(!touchDirectory()); return true; } }">
                <div class="directory" >
                    <div class="new-directory">
                        <span>Create directory</span>
                        <input type="text" data-bind="value: newDirectoryViewModel.directoryName, valueUpdate: 'afterkeydown', hasfocus: newDirectoryViewModel.isInNewDirectoryMode, event: { keydown: newDirectoryViewModel.onNewDirectoyAction }"/>
                    </div>
                </div>
            </li>
            <!-- /ko -->

            <!-- ko foreach: directories --> 
            <li data-bind="event: { mousedown: function() { $parent.touchDirectory(!$parent.touchDirectory()); return true; } }">
                <div class="directory" data-bind="attr: { title: name }">
                    <div class="directory-content" data-bind="click: $parent.goToDirectory">
                        <img data-bind="fadeSrc: currentThumbnailSrc"/>    
                    </div>
                    
                    <div class="directory-footer" data-bind="visible: !isEditingName(), click: editName, clickBubble: false">
                        <span class="text" data-bind="text: name" title="Click to edit directory name"></span>
                    </div>
                    
                    <div class="directory-footer" data-bind="visible: isEditingName">
                        <input type="text" data-bind="value: newName, valueUpdate: 'afterkeydown', hasfocus: isEditingName, event: { keydown: onNewNameAction }"/>
                    </div>
                    
                    <span class="totalNumber" data-bind="text: countImages" title="Number of images inside directory"></span> 
                   
                    <a class="delete" title="Delete directory" data-bind="click: $parent.deleteDirectory"><span></span></a>
                </div>
            </li> 
            <!-- /ko -->

            <!-- ko foreach: imageFiles --> 
            <li class="dojoDndItem"  data-bind="attr: { 'dndData': path }"  dndType="fileurl">
                <div class="file" data-bind="attr: { title: tooltip }, click: $parent.imageSelection.selectImage, css: { selected: $parent.imageSelection.isFileImageSelected($data)  }">
                    <a class="context-menu"><span data-dojo-attach-point="iconNodeMenu" class="dijitTreeIcon epi-iconContextMenu" role="presentation" data-bind="click: showMenu">&nbsp;</span></a>
                    <div class="file-content">
                        <img data-bind="attr: { src: thumbnailPath }"/>
                    </div>
                    <span class="selectionMarker"></span>
                </div>
            </li> 
            <!-- /ko -->
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>